<%@page import="java.awt.print.Printable"%>
<%@ page contentType="text/html;charset=UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%@ taglib prefix="tags" tagdir="/WEB-INF/tags"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />
<html>
<head>
<title>_${customer.customerName}_拣货</title>
<script type="text/javascript">
    
    var curItemId='';
 
	$(function() {
		  setCurTaskItem();
	});
	
	function setCurTaskItem(){
	  
	  $("#tbody_taskItem").find('tr').css("background-color","");
	  curItemId=''
	  $("[name='cur']").html('');
	  
	  $("#tbody_taskItem").find('tr').each(function(){
			var taskItemId=$(this).attr("name");
			var pickStatus=$("#pickStatus_"+taskItemId).attr("name");
			if(pickStatus!='picked'){
				
				$(this).css("background-color","#66CCFF");
				$("#pickStatus_"+taskItemId).html("拣货中...");
				
				curItemId=taskItemId;
				
                var cur_stockCode=$("#stockCode_"+curItemId).html();
                var cur_boxCode=$("#boxCode_"+curItemId).html();
                var cur_orderno=$("#orderno_"+curItemId).html();
                var cur_sku=$("#sku_"+curItemId).html();
                var cur_num=$("#num_"+curItemId).html();
                var cur_pickedNum=$("#pickedNum_"+curItemId).html();
                var cur_pickStatus=$("#pickStatus_"+curItemId).html();
                
                $("#cur_stockCode").html(cur_stockCode);
                $("#cur_boxCode").html(cur_boxCode);
                $("#cur_orderno").html(cur_orderno);
                $("#cur_sku").html(cur_sku);
                $("#cur_num").html(cur_num);
                $("#cur_pickedNum").html(cur_pickedNum);
                $("#cur_pickStatus").html(cur_pickStatus);
				
				 $("#txt_sku").focus();
				 
				return false;
			}
	  });
	  
    }
	
	function keydown(){
      $("#msg").html('');
    }

	function setNoBoxSKU(curItemId){
		var sku=$("#sku_"+curItemId).html();//sku编码
		if($("#box_"+sku).length>0){
			var sku=$("#sku_"+curItemId).html();//sku编码
			var picked=$("#box_"+sku).html();
			$("#box_"+sku).html(Number(picked)+1);
		}else{
			//$("#tbody_BoxCode").find('tr').css("background-color","");
			var tempString="<tr id=\"tr_"+sku+"\">";
			var serial=$("#serial_"+curItemId).html();//序号
			var stockCode=$("#stockCode_"+curItemId).html();//库位编码
			var boxCode=$("#boxCode_"+curItemId).html();//箱子编码
			var num=$("#num_"+curItemId).html();//总数量
			var pickedNum=$("#pickedNum_"+curItemId).html();//已拣数量
			
			//tempString+="<td>"+serial+"</td>";
			//tempString+="<td>"+stockCode+"</td>";
			//tempString+="<td>"+boxCode+"</td>";
			tempString+="<td>"+sku+"</td>";
			//tempString+="<td>"+num+"</td>";
			tempString+="<td id=\"box_"+sku+"\">1</td>";
			tempString+="</tr>";
			$("#tbody_BoxCode").append(tempString);
		}
		//$("#tr_"+sku).css("background-color","#66CCFF");
		var noBoxNumber=$("#noBoxNumber").html();
	    noBoxNumber=Number(noBoxNumber)+1;
	    $("#noBoxNumber").html(noBoxNumber);
	}
	
    function pick(){
      var sku=$("#txt_sku").val();
      
      $.ajax({
			type:'post',
			url:'${ctx}/pickBackupTask/ajaxPick',
			data:{
				taskItemId:curItemId,
				sku:sku
			},
			dataType:'json',
			success:function(data) {
				var msg=data.status;
				// 	 * @return 'coutinue'    : 拣货成功,继续此任务项拣货
				// 	 * @return 'finishing' :  拣货成功,此任务项完成
				// 	 * @return 'finished' :  此任务项已完成
				// 	 * @return 'task_finishing' : 拣货成功,此任务已经完成
				//   * @return 'task_finished' : 此任务已经完成
				// 	 * @return 'error'       : 验证不通过
				
				if(msg=='coutinue'){
				    $("#msg").css("color","green");
					$("#msg").html("验证成功");
					
					var _num=$("#cur_pickedNum").html();
					$("#cur_pickedNum").html(Number(_num)+1);
					$("#pickedNum_"+curItemId).html(Number(_num)+1);
					
					setNoBoxSKU(curItemId);
				}
				else if(msg=='finishing'){
				    $("#msg").css("color","green");
					$("#msg").html("验证成功，请继续下一任务项");
                    
					var _num=$("#cur_pickedNum").html();
					$("#cur_pickedNum").html(Number(_num)+1);
					$("#pickedNum_"+curItemId).html(Number(_num)+1);
					$("#pickStatus_"+curItemId).attr("name","picked");
					$("#pickStatus_"+curItemId).html("<span class=\"label label-success\">已拣货</span>");
					setNoBoxSKU(curItemId);
					setCurTaskItem();
					
					
				}
				else if(msg=='finished'){
				    $("#msg").css("color","red");
					$("#msg").html("此任务项已完成");
				}
				else if(msg=='task_finishing'){
				    $("#msg").css("color","green");
					$("#msg").html("扫描验证成功...");
					var _num=$("#cur_pickedNum").html();
					$("#cur_pickedNum").html(Number(_num)+1);
					$("#pickedNum_"+curItemId).html(Number(_num)+1);
					$("#pickStatus_"+curItemId).attr("name","picked");
					$("#pickStatus_"+curItemId).html("<span class=\"label label-success\">已拣货</span>");
					setCurTaskItem();
					//completePickTask();//任务完成，触发修改任务状态事件
				}
				else if(msg=='error'){
				    $("#msg").css("color","red");
					$("#msg").html("扫描验证错误!");
				}
				
				$("#txt_sku").val('');
				$("#txt_sku").focus();
				
			},
			error:function() {
				alert("网络繁忙，请稍后重试...");
			}
	   });
    }
    
   //完成拣货任务
   function completePickTask(){
	   var taskId='${task.id}';
       $.ajax({
			type:'post',
			url:'${ctx}/pickBackupTask/ajaxCompletePickTask',
			data:{
				taskId:taskId
			},
			dataType:'json',
			success:function(data) {
			    if(data==true){
			      alert("此分拣任务已经全部完成");
			    }else{
			      alert("网络繁忙 ...");
			    }
			},
			error:function() {
				alert("网络繁忙 ...");
			}
	   });
       
   }
   
   function ajaxCreateBox(){
	   var item=$("#boxId").val();
		if(item==null||item==""){
			alert("请输入箱子编码");
			return;
		}
       $.ajax({
			type:'post',
			url:'${ctx}/pickBackupTask/ajaxCreateBox',
			data:{
				backupTaskCode:'${task.backupTaskCode}',
				boxCode:item
			},
			dataType:'json',
			success:function(data) {
			    if(data.status==1){
			    	var tempStringBox = "<tr id=\""+data.content.boxCode+"\"><td>" + data.content.boxCode + "</td>";
			            if ("single" == data.content.type) {
				             tempStringBox += "<td>单件</td>";
			               } else {
				              tempStringBox += "<td>多件</td>";
			                 }
			   tempStringBox += "<td id=\""+data.content.boxCode+"1\">" + data.content.skuQty + "</td><td id=\""+data.content.boxCode+"2\">" + data.content.skuType
					+ "</td><td><a href=\"#selextPrinter\" role=\"button\" data-toggle=\"modal\" class=\"btn\""+
					" onclick=\"initPrinter('"+data.content.boxCode+"')\">打印箱子编码</a></td></tr>";
			   $("#boxCodeTBody").append(tempStringBox);
			   $("#boxId").val("");
			   $("#msgBoxCode").css("color","green");
			   $("#msgBoxCode").html("装箱成功");
			   $("#tbody_BoxCode").html("");
			   $("#noBoxNumber").html(0);
			   //$("#txt_boxCode").attr("disabled","disabled");
			   //$("#txt_boxCode").val("");
			   //$("#txt_sku").attr("disabled",false);
			   $("#txt_sku").focus();
			    }else{
			      alert("网络繁忙 ...");
			    }
			},
			error:function() {
				alert("网络繁忙 ...");
			}
	   });
       
   }
 
</script>
</head>

<body>

	<table id="contentTable" class="table table-striped table-bordered table-condensed">
	    <thead>
			<th style="vertical-align: middle; color: white; " colspan="13" bgcolor="#8EB4CB">当前任务项</th>
		</thead>
		<thead><tr>
			    <th width="80">库位编号</th>
			    <th>箱子编号</th>
			    <th>SKU编号</th>
			    <th>待拣数量</th>
			    <th>已拣数量</th>
			    <th>状态</th>
			</tr></thead>
			
	        <tbody>
	          <tr id="tr_curTaskItem" height="50px;">
				   <td id="cur_stockCode" name="cur"></td>
				   <td id="cur_boxCode" name="cur"></td>
				   <td id="cur_sku" name="cur"></td>
				   <td id="cur_num" name="cur"></td>
				   <td id="cur_pickedNum" name="cur"></td>
				   <td id="cur_pickStatus" name="cur"></td>
			  </tr>
	        </tbody>
	       
	       
	        <tr >
	           <td height="50" style="vertical-align:middle;font-weight: bold;">扫描商品</td>
	           <td colspan="6" height="50" >
	             <input type="text" id="txt_sku" onchange="pick();" onkeydown="keydown();" style="margin-top: 10px; margin-left: 10px;" >
	             <span style="margin-left:12px; margin-top: 10px; color: red;font-weight: bold;" id="msg"></span>
	           </td>
	          <!-- <td height="50" style="vertical-align:middle;font-weight: bold;">箱子编码</td>
	           <td colspan="3" height="50" >
	             <input type="text" id="txt_boxCode" onchange="ajaxCreateBox(this);"  style="margin-top: 10px; margin-left: 10px;" disabled="disabled">
	             <span style="margin-left:12px; margin-top: 10px; color: red;font-weight: bold;" id="msgBoxCode"></span>
	           </td> -->
	        </tr>
	    
	</table>
	
	
	<div class="span12" style="height: 500px;overflow: auto;margin-left: 0px;">
			<div class="span6">
			  <div class='breadcrumb'><span class="badge badge-info">点数明细 :<span id="noBoxNumber"> ${noBoxNumber }</span></span>
			  
			  <a href="#boxWindow" role="button" data-toggle="modal"  class="btn btn-info btn-small pull-righ">开始封箱</a>
			  <!-- <a href="javascript:void();" class="btn btn-info btn-small pull-right" id="createBox">现在封箱</a> -->
				<a href="javascript:ajaxPutShippedBatch();" class="btn btn-danger btn-small pull-right" style="display: none;" id="putShippedBatch">同步出库</a></div>				
				<table  class="table table-striped table-bordered table-condensed" style="margin-top: 0px;">
					<thead>
						<tr>
			                
			                 <th>SKU编号</th>
			                 <th>数量</th>
				
						</tr>
					</thead>
					<tbody id="tbody_BoxCode">
						<c:forEach items="${allSkuMaps}" var="obj">
							<tr>
								<td>
									${obj.key}
								</td>
								<td id="box_${obj.key}">
									${obj.value}
								</td>
							</tr>
						</c:forEach>
					</tbody>
				</table>
			</div>
			<div class="span6">
	<!-- 拣货任务项 -->
	 <div class='breadcrumb'><span class="badge">拣货任务列表</span></div>
	<table class="table  table-bordered " style="margin-top: 0px;">
		<thead><tr>
		        <th width="80">序号</th>  
			    <th>库位</th>
			    <th>箱号</th>
			    <th>SKU</th>
			    <th>待拣</th>
			    <th>已拣</th>
			    <th>状态</th>
			</tr></thead>
			
			<tbody id="tbody_taskItem">
			<c:forEach items="${taskItemList}" var="item" varStatus="i">
			    <tr id="tr_${item.id}" name="${item.id}" >
				   <td id="serial_${item.id}">${i.count}</td>
				   <td id="stockCode_${item.id}">${item.stockCode}</td>
				   <td id="boxCode_${item.id}">${item.boxCode}</td>
				   <td id="sku_${item.id}">${item.sku}</td>
				   <td id="num_${item.id}">${item.num}</td>
				   <td id="pickedNum_${item.id}">${item.pickedNum}</td>
				   <td id="pickStatus_${item.id}" name="${item.pickStatus}">
				     <c:if test="${item.pickStatus eq 'unpicked'}">待拣货</c:if>
				     <c:if test="${item.pickStatus eq 'picking'}">拣货中</c:if>
				     <c:if test="${item.pickStatus eq 'picked'}">已拣货</c:if>
				   </td>
				</tr>
			</c:forEach>
			</tbody>
			
	</table>
	</div>
	</div>
	
	<!-- 已经封箱的箱子列表 -->
	<div class="span12" style="height: 300px;overflow: auto;margin-left: 0px;">
			
				<table class="table table-striped table-bordered table-condensed">
				<thead>
			         <th style="vertical-align: middle; color: white; " colspan="13" bgcolor="#8EB4CB">已经封箱的箱子 </th>
		        </thead>
					<thead>
						<tr>
							<th>
								箱子编码
							</th>
							<th>
								箱子类型
							</th>
							<th>
								商品数量
							</th>
							<th>
								商品种类
							</th>
							<th>
								操作
							</th>
						</tr>
					</thead>
					<tbody id="boxCodeTBody">
						<c:forEach items="${shippedBoxs }" var="object">
							<tr id="${object.boxCode }">
								<td>
									${object.boxCode }
								</td>
								<td>
									<c:if test="${object.type eq 'single' }">单件</c:if>
									<c:if test="${object.type eq 'multiple' }">多件</c:if>
								</td>
								<td id="${object.boxCode }1">
									${object.skuQty }
								</td>
								<td id="${object.boxCode }2">
									${object.skuType }
								</td>
								<td>
									<a href="#selextPrinter" role="button" data-toggle="modal" class="btn" onclick="initPrinter('${object.boxCode}')">打印箱子编码</a>
								</td>
							</tr>
						</c:forEach>
					</tbody>
				</table>
			</div>
		
<script type="text/javascript">
  $("#createBox").click(function(){
	   $("#txt_sku").attr("disabled","disabled");
	   $("#txt_boxCode").attr("disabled",false);
	   $("#txt_boxCode").focus();
  });
</script>


<!-- 箱子编码 -->
		<div style="display: none; width: 1000" class="modal hide fade"
			tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
			aria-hidden="true" id="boxWindow">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-hidden="true">
					×
				</button>
				<h3 id="printerNumber">
					请输入箱子编码
				</h3>
			</div>
			<div class="modal-body">
				请输入箱子编码:
				<input type="text" id="boxId" />
			</div>
			<div class="modal-footer">
				<button class="btn btn-primary" data-dismiss="modal" aria-hidden="true" id="printer" onclick="ajaxCreateBox();">
					确定
				</button>

				<button class="btn" data-dismiss="modal" aria-hidden="true">
					关闭
				</button>
			</div>
		</div>
</body>
</html>
